<template>
  <div>
    <div class="row-header" :style="{'overflow-x':$store.state.app.screenWidth<450?'scroll':'auto'}">
      <el-form ref="searchForm" :model="searchForm" label-width="100px" :inline="true"
               :style="{'width': $store.state.app.screenWidth<500?'400px':'100%'}">
        <el-form-item label=" " prop="name">
          <el-input size="small" v-model="searchForm.name" style="width: 240px;" placeholder="请输入任务名字"></el-input>
        </el-form-item>
        <el-form-item label=" " prop="dictType">
          <el-select size="small" placeholder="请选择任务类型" style="width: 240px" v-model="searchForm.dictType">
            <el-option value="MISSION_EXPORT" label="导出"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="mini" icon="el-icon-search" @click="page.current=1,initData()">查询
        </el-button>
        <el-button type="shenda" size="mini" icon="el-icon-refresh-right" @click="resetForm('searchForm')">
          重置
        </el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main" :style="{'overflow-x':$store.state.app.screenWidth<992?'scroll':'auto'}">
      <el-button type="shenda" size="mini" icon="el-icon-refresh" @click="page.current=1,initData()">刷新数据
      </el-button>
      <el-table :data="tableData"
                ref="mainDataTable"
                v-loading.fullscreen="mainTableLoading"
                class="row-main-table"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)"
                :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }">
        <el-table-column prop="id" label="任务ID" align="center" :width="$store.state.app.screenWidth<992?'100px':'auto'"
                         :fixed="$store.state.app.screenWidth<992?true:false"></el-table-column>
        <el-table-column prop="name" label="任务名字" align="center"
                         :width="$store.state.app.screenWidth<992?'130px':'auto'"></el-table-column>
        <el-table-column prop="success" label="成功数" align="center"
                         :width="$store.state.app.screenWidth<992?'70px':'auto'"></el-table-column>
        <el-table-column prop="fail" label="失败数" align="center"
                         :width="$store.state.app.screenWidth<992?'70px':'auto'"></el-table-column>
        <el-table-column prop="allcount" label="总数" align="center"
                         :width="$store.state.app.screenWidth<992?'70px':'auto'"></el-table-column>
        <el-table-column prop="reason" label="原因" align="center"
                         :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="dictTypeName" label="任务类型" align="center"
                         :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="insertTimeTime" label="创建时间" align="center"
                         :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="shenda" @click="openExcelDialogce(scope.row)" size="mini" icon="el-icon-download">下载数据</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[10,20,50,100]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          background
          class="row-main-pager">
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="Excel下载"
      :visible.sync="excelDialogVisiblece"
      width="500px"
      center>
      <div>
        <div v-for="(item,i) in exlList" style="margin-top: 5px;display: flex;justify-content: space-between">
          <span v-if="i === exlList.length-1">第 {{i*60000+1}} 条 至 第 {{exlLength}} 条数据</span>
          <span v-if="i<exlList.length-1">第 {{i*60000+1}} 条 至 第 {{(i+1)*60000}} 条数据</span>
          <el-button type="success" @click="downLoadData(item)" size="small">excel下载</el-button>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="excelDialogVisiblece = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    missionList,
    exportexcelRecords
  } from '@/api/getData'

  export default {
    name: 'MissionPlan',
    data() {
      return {
        searchForm: {
          name: '',
          dictType: ''
        },
        mainTableLoading: false,
        page: {
          current: 1,
          size: 10,
          total: 0,
          ascs: [],
          descs: [],
        },
        tableData: [],
        excelDialogVisiblece: false,
        exlList: [],  //可下载表格列表
        exlLength: 0,
      }
    },
    methods: {
      beforeinitData() {
        this.page.current = 1
        this.initData()
      },
      initData() {
        this.mainTableLoading = true;
        this.searchForm.page = this.page;
        sessionStorage.setItem(this.$route.path, JSON.stringify(this.searchForm))
        missionList(this.searchForm).then(response => {
          this.tableData = response.data.records;
          this.page.total = response.data.total;
          this.loading = false;
          this.mainTableLoading = false;
        }).catch(e => {
          this.loading = false;
          this.mainTableLoading = false
        })
      },
      handleCurrentChange(val) {
        this.page.current = val;
        this.initData()
      },
      handleSizeChange(val) {
        this.page.current = 1;
        this.page.size = val;
        this.initData();
      },
      resetForm(formName) {
        // console.log(321)
        this.$refs[formName].resetFields()
      },
      openExcelDialogce(row) {
        this.mainTableLoading = true;
        this.exlLength = row.success;
        exportexcelRecords({id: row.id}).then(res => {
          this.exlList = res.data;
          this.mainTableLoading = false;
          this.excelDialogVisiblece = true;
        })
      },
        //下载行内数据内所有卡号数据
      async downLoadData(row) {
        window.location.href = `/api/file-export-system/file-export/exportExcel/white?id=${row.id}`;
      },
    },

    created() {
      let searchObj = sessionStorage.getItem(this.$route.path);
      if (searchObj != undefined && searchObj != null && searchObj != '') {
        this.searchForm = JSON.parse(searchObj)
        this.page = this.searchForm.page
      }
      this.initData()
    }
  }
</script>

<style scoped>

</style>
